<template>
   <h2>计算属性的演示</h2>
  <p>姓: <input type="text" v-model="firstName"></p>
  <p>名: <input type="text" v-model="lastName"></p>
  <p>全名: <input type="text" v-model="fullName"></p>
</template>

<script>

//引入计算属性
import { ref ,computed} from 'vue'
export default {
  name: 'HelloWorld_h'
  ,
  setup() {
  let firstName=ref('张')
    let lastName = ref('三')
   //计算属性
    let fullName = computed({
      get() {
          return firstName.value + '-' + lastName.value
      },
      set(val) {
         const arr = val.split('-')
        firstName.value = arr[0]
        lastName.value = arr[1]
      }
    })
    return {
      firstName,
      lastName,
      fullName
    }

   
  }
}
</script>

<style>

</style>